<template>
  <div class="hello">
    <b>子组件</b>
    <div>
      <span>{{ msg }}</span>
    </div>
    <div>
      <button @click="childClick">子组件按钮</button>
      <button @click="getParent">获取父组件的方法和值</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  // 子组件通过使用 props 接收父组件传递过来的数据
  props: {
    msg: String
  },
  data () {
    return {
      sonTitle: '我是子组件'
    }
  },
  methods: {
    // 这个方法由父组件通过 this.$refs.childEl.showText('我来自父组件') 调用触发
    showText (text) {
      alert(text)
    },
    // 子组件通过 $emit 调用父组件中的方法
    childClick () {
      this.$emit('setValueName', '我是通过子组件传递过来的')
    },
    // 父组件通过 this.$children 来调用
    sonHandle () {
      console.log('我是子组件的方法')
    },
    // 调用父组件的方法和获取父组件的值
    getParent () {
      console.log(this.$parent)
      console.log(this.$parent.parentTitle) //= > 我是父组件
      this.$parent.parentHandle() //= > 我是父组件的方法
    }
  }
}
</script>
<style scoped>
.hello {
  width: 300px;
  height: 300px;
  border: 1px solid gold;
}
</style>
